<template>
  <div>
    <button @click="show = !show">显示/隐藏</button>
    <transition>
      <div v-if="show">Hello, World!</div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const show = ref(false)

</script>

<style scoped>
.v-enter-active,
.v-leave-active {
  transition: opacity 2s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>